﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link rel="stylesheet" href="~/css/AdminLTE.min.css" />
<link rel="stylesheet" href="~/components/fontawesome-iconpicker/css/fontawesome-iconpicker.min.css" />
<link href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet">
<style>
    /* The container */
    .container {
        display: block;
        position: relative;
        padding-left: 26px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 14px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        /* Hide the browser's default radio button */
        .container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

    /* Create a custom radio button */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 18px;
        width: 18px;
        background-color: #eee;
        -ms-border-radius: 50%;
        border-radius: 50%;
    }

    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
        background-color: #ccc;
    }

    /* When the radio button is checked, add a blue background */
    .container input:checked ~ .checkmark {
        background-color: #2196F3;
    }

    /* Create the indicator (the dot/circle - hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the indicator (dot/circle) when checked */
    .container input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the indicator (dot/circle) */
    .container .checkmark:after {
        top: 6px;
        left: 6px;
        width: 6px;
        height: 6px;
        -ms-border-radius: 50%;
        border-radius: 50%;
        background: white;
    }
</style>
<div class="col-md-12">
    <div class="box box-info">
        <form id="create-form" role="form" method="post" data-bind="submit:function(){ajaxSubmit('create-form');}" action="@Url.Action("Add")">
            @Html.AntiForgeryToken()
            <div class="box-body">
                <div class="form-group">
                    <label for="MenuName"><font color="red">*</font>名称：</label>
                    <input type="text" class="form-control" id="MenuName" name="MenuName" required maxlength="20" />
                </div>
                <div class="form-group">
                    <label for="MenuIcon">图标：</label>
                    <div class="input-group">
                        <input data-placement="bottomRight" class="form-control" type="text" id="MenuIcon" name="MenuIcon" value="far fa-list-alt" />
                        <span class="input-group-addon"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="ParentId">父级：</label>
                    <input type="hidden" id="ParentId" name="ParentId" value="0"/>
                    <div id="treeview"></div>
                </div>
                <div class="form-group">
                    <label for="Identity"><font color="red">*</font>标识：</label>
                    <input type="text" class="form-control" id="Identity" name="Identity" required maxlength="100" />
                </div>
                <div class="form-group">
                    <label for="RouteUrl"><font color="red">*</font>URL：</label>
                    <input type="text" class="form-control" id="RouteUrl" name="RouteUrl" required maxlength="200" />
                </div>
                <div class="form-group">
                    <label>启/停用：</label>
                    <label class="container pull-right">
                        启用
                        <input type="radio" checked="checked" name="Active" value="True" />
                        <span class="checkmark"></span>
                    </label>
                    <label class="container pull-right">
                        停用
                        <input type="radio" name="Active" value="False" />
                        <span class="checkmark"></span>
                    </label>
                </div>
                <div class="form-group">
                    <label>显示/隐藏：</label>
                    <label class="container pull-right">
                        显示
                        <input type="radio" checked="checked" name="Visible" value="True" />
                        <span class="checkmark"></span>
                    </label>
                    <label class="container pull-right">
                        隐藏
                        <input type="radio" name="Visible" value="False" />
                        <span class="checkmark"></span>
                    </label>
                </div>
            </div>
            <div class="box-footer">
                <button type="submit" class="btn btn-info pull-right">保存</button>
            </div>
        </form>
    </div>
</div>
@section Scripts
{
    <script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
    <script src="~/components/fontawesome-iconpicker/js/fontawesome-iconpicker.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
    <script src="~/js/sysmenu.viewmodel.js"></script>
    <script type="text/javascript">
        $(function() {
            ko.applyBindings(sysMenuModel);
            $("#MenuIcon").iconpicker();
            sysMenuModel.get('@Url.Action("GetTreeMenus")', {}, function(rep) {
                if (rep.success == true) {
                    $("#treeview").treeview({
                        data: rep.rows,
                        onNodeSelected: function(event, data) {
                            $("#ParentId").val(data.tags);
                        }
                    });
                } else {
                    layer.alert("树形列表初始化失败，请重试。", { icon: 5 });
                }
            });
        });
    </script>
}